<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %> 


<c:set var="width" scope="page" value="${1000 / fn:length(CodePlantMap)}"/>
<c:set var="widthInner" scope="page" value="${width * 0.9}"/>

<style type="text/css">
.outer {
	margin: 0px auto;
	border: solid 0px #000000;
}    
.divScroll-3 {
	height:260px;
	overflow:auto;
	white-space:nowrap;
	padding: 1px;
	font-size: 12px;
}

</style>
 
 
 
<script>

var cnt = 6;
function noSelected(code,name){	
	var width1 = 1000 / --cnt;
	var width2 = width1 * 0.9;	
	var img_no = "<img src='${appPath }/resource/image/checkbox_no.png'/>&nbsp;";	
	$("#noChooseRegion").append("<span id='span_"+code+"' style='cursor: pointer;' onclick=\"selected('"+code+"');\" >" + img_no + name + "&nbsp;&nbsp;</span>");	
	$("#td_" + code).hide();
	$(".codePlantTd").css("width",width1 + "px");
	$(".outer").css("width",width2 + "px");
	$(".divScroll-3").css("width",width2 + "px");	
	$("#checkbox_" + code).prop("checked",false);
}

function selected(code){
	var width1 = 1000 / ++cnt;
	var width2 = width1 * 0.9;	
	$("#span_" + code).remove();
	$("#td_" + code).show();	
	$(".codePlantTd").css("width",width1 + "px");
	$(".outer").css("width",width2 + "px");
	$(".divScroll-3").css("width",width2 + "px");
	$("#checkbox_" + code).prop("checked",true);
}

function selectedPlant(code,name_ch){	
	var _color = $("#dis_" + code).css("color");	
	if(_color == "green" || _color == 'rgb(0, 128, 0)'){
		var rem = "";
		var _a = '<span style="border: dotted 3px #0000FF;background-color:#FFFFFF;padding:5px;" class="spanSelected_'+code+'" >';
		_a += name_ch + rem + "</span><span class=\"spanSelected_"+code+"\">&nbsp;&nbsp;</span>";
		$("#selectedPlantArea").append(_a);
		$("#dis_" + code).css({"color":"red"});		
		var scc = $("#selectedCodePlants").val();
		scc += code + ",";
		$("#selectedCodePlants").val(scc);
		$("#selectedCodePlantsNameCH").val($("#selectedCodePlantsNameCH").val() + name_ch + ",");
	}else{
		$("#dis_" + code).css({"color":"green"});
		$(".spanSelected_" + code).remove();		
		var scc = $("#selectedCodePlants").val();	
		$("#selectedCodePlants").val(scc.replace(code + ",",""));		
		var scc2 = $("#selectedCodePlantsNameCH").val();	
		$("#selectedCodePlantsNameCH").val(scc2.replace(name_ch + ",",""));
	}	
}

function codePlantSubmit(){
	var scnArray = $("#selectedCodePlantsNameCH").val().split(",");
	var sccArray = $("#selectedCodePlants").val().split(",");
	
	var scc = "";
	for(var i=0;i<scnArray.length - 1;i++){	
		var remove = "<a href='javascript:void(0);' onclick='removePlantCode(\""+sccArray[i]+"\",\""+scnArray[i]+"\");'>[移除]</a>";
		if(i != 0){
			scc += "<span id='CP_"+sccArray[i]+"'>、" + scnArray[i] + remove + "</span>";	
		}else{
			scc += "<span id='CP_"+sccArray[i]+"'>" + scnArray[i] + remove + "</span>";
		}
	}
	if(scc.length != 0)
		$("#span_selectedCodePlants").html(scc + "<br/>");
	$('#HintPlantOverlay').fadeOut('fast');
	$("#plants_code").val($("#selectedCodePlants").val());
	$("#plants_name_ch").val($("#selectedCodePlantsNameCH").val());
}
</script>


<table>
	<tr>
		<c:forEach var="CodePlants" items="${CodePlantMap }" varStatus="s">
			<c:set var="isHide" value="${CodePlants.key.hide ? 'display:none;' : ''}" />		
			<td valign="top" style=";width:${ width}px;text-align: left;" id="td_${CodePlants.key.code }" class="codePlantTd" >
				<span style="color:blue;">
					${CodePlants.key.name_ch }(${fn:length(CodePlants.value)})
				</span>
				
				<div class="outer" style="width:${widthInner}px;">
					<div class="divScroll-3" style="width:${widthInner}px;">
						<c:forEach var="CodePlantsInner" items="${CodePlants.value }" >
						 
							<c:if test="${CodePlantsInner.selected}">
								<span style="cursor: pointer;color: red" id="dis_${CodePlantsInner.code}" onclick="selectedPlant('${CodePlantsInner.code}','${CodePlantsInner.name_ch}');">
									${CodePlantsInner.name_ch}&nbsp;(${CodePlantsInner.name_en})
								</span>
							</c:if>		
							
												
							<c:if test="${!CodePlantsInner.selected}">
								<span style="cursor: pointer;" id="dis_${CodePlantsInner.code}" onclick="selectedPlant('${CodePlantsInner.code}','${CodePlantsInner.name_ch}');">
									${CodePlantsInner.name_ch}&nbsp;(${CodePlantsInner.name_en})
								</span>
							</c:if>
						
							<br/>							
						</c:forEach>
					</div>
				</div>
			<td>
		</c:forEach>
	</tr>
</table>


<div align="left">
	<c:forEach var="CodePlantsInner" items="${CodePlantMap }">
		<input type="checkbox" value="${CodePlantsInner.key.code }" id="checkbox_${CodePlantsInner.key.code }" class="regions" style="display:none"
			<c:if test="${!CodePlantsInner.key.hide}">
				checked="checked"
			</c:if>
		/>
	</c:forEach>
</div>

<input type="hidden" id="selectedCodePlants" value="${CodePlantsSelected }"/>
<input type="hidden" id="selectedCodePlantsNameCH" value="${CodePlantsSelectedNameCH}"/>

